import React, { useState } from 'react';
import Button from './components/Button/button'
import {library} from '@fortawesome/fontawesome-svg-core'
import {fas} from '@fortawesome/free-solid-svg-icons'
import Menu from './components/Menu/menu'
import MenuItem from './components/Menu/menuItem'
import SubMenu from './components/Menu/subMenu'
import Icon from './components/Icon/icon'
import Transition from './components/Transition/transition'

library.add(fas)

function App() {
  const [show, setShow] = useState(false)
  return (
    <div className="App">
      <header className="App-header">
        <Icon icon="coffee" theme="danger" size="10x" />
        {/* <FontAwesomeIcon icon={faCoffee} size="lg" /> */}

        <Button>Hello</Button>
        <Button btnType="primary" size="lg">Hello</Button>
        <Button disabled btnType="link" href="http://www.baidu.com">baidu link</Button>
        
        <br/>
        <Menu defaultIndex='0' onSelect={(index) => alert(index)}>
          <MenuItem>ohayo1</MenuItem>
          <MenuItem disabled>ohayo2</MenuItem>
          <MenuItem>ohayo3</MenuItem>
        </Menu>

        <br/>
        <Menu mode="horizontal" defaultOpenSubMenu={['2']} defaultIndex='0' onSelect={(index) => alert(index)}>
          <MenuItem>dropdown</MenuItem>
          <MenuItem disabled>dropdown2</MenuItem>
          <SubMenu title="dropdown">
            <MenuItem>dropdown one</MenuItem>
            <MenuItem>dropdown two</MenuItem>
          </SubMenu>
          <MenuItem>dropdown3</MenuItem>
        </Menu>
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

        <br/>
        <Button size="lg" onClick={() => setShow(!show)}>Toggle</Button>
        <Transition in={show} timeout={300} animation="zoom-in-left">
          <div>
            <p>dfsdfsdf</p>
            <p>dfsdfsdf</p>
            <p>dfsdfsdf</p>
            <p>dfsdfsdf</p>
            <p>dfsdfsdf</p>
          </div>
        </Transition>
        <Transition wrapper in={show} timeout={300} animation="zoom-in-left">
          <Button btnType="primary" size="lg">lg btn</Button>
        </Transition>
      </header>
    </div>
  );
}

export default App;
